<script setup>

import { reactive, ref } from 'vue'

import Header from '@/components/stepone/Header.vue'
import DraperyRod from '@/components/steptwo/DraperyRod.vue'
import RodLength from '@/components/stepthree/RodLength.vue'
import DecideDraperyLength from '@/components/stepfour/DecideDraperyLength.vue'
import DrapesFinishedLength from '@/components/stepseven/DrapesFinishedLength.vue'
import Previous from '@/components/common/Previous.vue'
import WindowWidth from '@/components/stepthree/WindowWidth.vue'
import InchesBeyondFrame from '@/components/stepfour/InchesBeyondFrame.vue'
import SingleorSplitPanel from '@/components/stepfive/SingleorSplitPanel.vue'
import HeightFromWindowTopToFloor from '@/components/stepfive/HeightFromWindowTopToFloor.vue'
import InchesMountRod from '@/components/stepsix/InchesMountRod.vue'
import FinishedLookDrapesFullness from '@/components/stepsix/FinishedLookDrapesFullness.vue'


const measurement = reactive({
  "header":"",
  "drapery_rod_installed":"",
  "rod_length":"",
  "drapery_length":"",
  "single_or_split_panels":"",
  "window_width":"",
  "inches_beyond_frame":{
    "left":"",
    "right":"",
  },
  "finished_length_drapes":"",
  "finished_look_drapes_fullness":"",
  "height_from_window_top_to_floor":"",
  "get_inches_mount_rod":"",
});

//define data in this
const step = ref({
    step: 1,
    active: true,
});

const final_width = ref('')
const final_height = ref('')

const previous = () => {
  if(step.value.step > 1){
    step.value.step = step.value.step - 1;
  }
}

//step 1
const headerSelected = (title) => {
   measurement.header = title;
   step.value.step = 2;
   console.log('step1', measurement)
}

const getInchesBeyond = (inches) => {
  measurement.inches_beyond_frame.left = inches.left;
  measurement.inches_beyond_frame.right = inches.right;
  step.value.step = 5;
  console.log('step 5', measurement)
}

//step 2
const draperyRodSelected = (title) => {
   measurement.drapery_rod_installed = title;
   step.value.step = 3;
   console.log('step 2', measurement)
}

//step 3
const getDraperyInches = (inches) => {
  measurement.rod_length = inches;
  step.value.step = 4;
  console.log('step 3', measurement)
}

const getWindowWidth = (inches) => {
  measurement.window_width = inches;
  step.value.step = 4;
}

const FinishedLengthDrapes = (title) => {
   measurement.finished_length_drapes = title;
   let results = calculate()
   final_width.value = results[0]
   final_height.value = results[1]
   step.value.step = 8
}

//step 4
const MeasureHeightToDecideDrapery = (title) => {
   measurement.drapery_length = title;
   step.value.step = 5;
   console.log('step4', measurement)
}

const getSingleOrSplit = (title) => {
   measurement.single_or_split_panels = title;

  if(measurement.header.toUpperCase() === 'PLEATED'){
    step.value.step = 7
    return
  }

   step.value.step = 6
   console.log('step5', measurement)
}

const getFullness = (style) => {
  measurement.finished_look_drapes_fullness = style;
  console.log('step 6', measurement)
  step.value.step = 7;
}

const getHeightFromTopFloor = (inches) => {
  measurement.height_from_window_top_to_floor = inches;
  step.value.step = 6;
}

const getInchesMountRod = (inches) => {
   measurement.get_inches_mount_rod = inches;
   step.value.step = 6.1
}

const getSingleOrSplit1 = (title) => {
   measurement.single_or_split_panels = title;

  if(measurement.header.toUpperCase() === 'PLEATED'){
     step.value.step = 7
     return
  }

   step.value.step = 6.2
}

const getFullness1 = (style) => {
  measurement.finished_look_drapes_fullness= style;
  step.value.step = 7;
}

const calculate = () => {
  let W = measurement.rod_length;
  let window_width = measurement.window_width;
  let a = measurement.inches_beyond_frame.left
  let b = measurement.inches_beyond_frame.right
  let height = measurement.height_from_window_top_to_floor;
  let L = measurement.drapery_length;
  let singleOrSplit = measurement.single_or_split_panels.toUpperCase() === 'SINGLE PANEL'? 1 : 2;
  let drapery_rod_installed = measurement.drapery_rod_installed
  let fullness = measurement.finished_look_drapes_fullness
  let header = measurement.header
  let finished_length_drapes = measurement.finished_length_drapes
  let mount_rod_inches = measurement.get_inches_mount_rod
  let full
  let floor_above
  if(fullness === '2X FULLNESS'){
     full = 2
  }

  if(fullness === '1.5X FULLNESS'){
    full = 1.5
  }

  if(fullness === 'NO FULLNESS'){
    full = 1
  }

  if(finished_length_drapes.toUpperCase() === '1 INCH ABOVE FLOOR'){
     floor_above = -0.5
  }

  if(finished_length_drapes.toUpperCase() === 'BREAK ON FLOOR'){
    floor_above = 0
  }

  if(finished_length_drapes.toUpperCase() === 'SLIGHT PUDDLE ON FLOOR'){
    floor_above = 1
  }

  let final_width
  let final_height

  if(header.toUpperCase() === "SOFT TOP" && drapery_rod_installed === 'YES'){
    final_width = W/singleOrSplit*full
    final_height = L+floor_above
  }

  if(header.toUpperCase() === "SOFT TOP" && drapery_rod_installed === "NO"){
    console.log('soft top', [window_width, a, b, singleOrSplit, full, floor_above, height, mount_rod_inches])
    final_width = (window_width+a+b)/singleOrSplit*full
    final_height = (mount_rod_inches + height)+floor_above
  }

  if(header.toUpperCase() === 'PLEATED' && drapery_rod_installed === 'YES'){
     final_width = W/singleOrSplit
     final_height = L+floor_above
  }

  if(header.toUpperCase() === 'PLEATED' && drapery_rod_installed === 'NO'){
    final_width = (Number(window_width) + Number(a) + Number(b))/singleOrSplit
    final_height = (Number(height)+ Number(mount_rod_inches))+floor_above
  }

  if(header.toUpperCase() === "GROMMETS" && drapery_rod_installed === 'YES'){
     final_width = W/singleOrSplit*full
     final_height = L+floor_above
  }

  if(header.toUpperCase() === "GROMMETS" && drapery_rod_installed === 'NO'){
    final_width = (Number(window_width) + Number(a) + Number(b))/singleOrSplit
    final_height = (Number(height)+ Number(mount_rod_inches))+floor_above
  }

  return [final_width, final_height]
}

</script>

<template>

  <div v-if="step.step === 1" class="step step-one">
     <Header @selected="headerSelected"/>
  </div>

  <div v-if="step.step === 2" class="step step-two">
    <Previous @previous="previous"/>
    <DraperyRod @selected="draperyRodSelected"/>
  </div>

  <div v-if="step.step === 3" class="step step-three">
    <Previous @previous="previous"/>
    <div v-if="measurement.drapery_rod_installed === 'YES'">
       <RodLength @submit="getDraperyInches"/>
    </div>

    <div v-if="measurement.drapery_rod_installed === 'NO'">
        <WindowWidth @submit="getWindowWidth"/>
    </div>
  </div>

  <div v-if="step.step === 4" class="step step-four">
     <Previous @previous="previous"/>

     <div v-if="measurement.rod_length !== ''">
        <DecideDraperyLength @submit="MeasureHeightToDecideDrapery"/>
     </div>
     <div v-if="measurement.window_width !== ''">
        <InchesBeyondFrame @submit="getInchesBeyond"/>
     </div>

  </div>

  <div v-if="step.step === 5" class="step step-five">
    <Previous @previous="previous"/>
    <div v-if="measurement.drapery_length > 1">
       <SingleorSplitPanel @submit="getSingleOrSplit" />
    </div>

    <div v-if="measurement.inches_beyond_frame.left > 1">
        <HeightFromWindowTopToFloor @submit="getHeightFromTopFloor"/>
    </div>

  </div>

  <div v-if="step.step === 6" class="step step-six">
    <Previous @previous="previous"/>

    <div v-if="measurement.drapery_rod_installed === 'NO'">
       <InchesMountRod @submit="getInchesMountRod"/>
    </div>

    <div v-if="measurement.rod_length > 1">
      <FinishedLookDrapesFullness @selected="getFullness"/>
    </div>
  </div>

  <div v-if="step.step === 6.1" class="step step-sixpointone">
      <SingleorSplitPanel @submit="getSingleOrSplit1"/>
  </div>

  <div v-if="step.step === 6.2" class="step step-sixpointtwo">
     <FinishedLookDrapesFullness @selected="getFullness1"/>
  </div>

  <div v-if="step.step === 7" class="step step-seven">
    <Previous @previous="previous"/>
     <DrapesFinishedLength @calculate="FinishedLengthDrapes"/>
  </div>

  <div v-if="step.step === 8" class="step step-eight">
     <div>
       All done
     </div>

    <p>
      Your recommended dimensions for per panel are
    </p>

    <div class="result">
      {{final_width}}"W × {{final_height}}"L
    </div>

    <div>
      If you can't find the exact dimensions on our website, please contact us first by email: support@twopagescurtains.com
    </div>
    <hr>
    <div class="button-container">
      <button type="button" @click="calculate">CALCULATE</button>
      <button type="button" @click="shopnow">Shop now</button>
    </div>
  </div>

</template>

<style scoped>

.step {
   margin:0 auto;
}

.step-eight {
  display: flex;
  flex-direction: column;
  gap:10px;
  justify-content: center;
  align-items: center;
}

.button-container {
  display: flex;
  gap:15px;
  justify-content: space-evenly;
}

.result {
  font-size: 1.8rem;
  font-weight: 700;
}

button {
  border:none;
  outline:none;
  padding:10px;
  background-color:black;
  color:white;
  display: flex;
  width:250px;
  justify-content: center;
  text-transform: uppercase;
  font-weight: bold;
}

@media screen and (max-width: 600px) {

  .button-container {
    display: flex;
    flex-direction: column;
    gap:10px;
    justify-content: center;
    align-items: center;
  }

}

</style>
